<template>

<!--  up-->
  <el-row>
    <el-col>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="教师号">
          <SearchInput v-on:getText="selectTeacherId" :data="data" keyword="teacherId" label="请输入教师编号"></SearchInput>
        </el-form-item>
        <el-form-item label="教师姓名">
          <SearchInput v-on:getText="selectTeacherName" :data="data" keyword="teacherName" label="请输入教师姓名"></SearchInput>
        </el-form-item>
        <el-form-item label="状态">
          <el-select  placeholder="状态筛选" v-model="searchForm.status">
            <el-option label="全部" value=""></el-option>
            <el-option label="停用" value="2"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="searchTeacher()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh" @click="clean()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

<!--  middle-->
  <el-row>
    <el-col>
      <el-row>
        <el-button type="success" :icon="Plus" @click="addDialog = true">新增</el-button>
        <el-button type="danger" :icon="Delete">批量删除</el-button>
      </el-row>
    </el-col>
  </el-row>

<!--  down-->
  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-table
          :data="getData"
          style="width: 100%"
          height="300"
          header-cell-style="background:#f8f8f9;color:#535a6c">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="教师编号" width="120" />
        <el-table-column prop="teacherId" label="教师号" width="150" />
        <el-table-column prop="teacherName" label="教师姓名" width="180" />
        <el-table-column prop="teacherSex" label="教师性别" sortable>
          <template #default="scope">
            <teacherSex :teacherSex="scope.row.teacherSex"/>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="教师状态">
          <template #default="scope">
            <StatusTag :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户名" width="150">
          <template #default="scope">
            <UserNameById :id="scope.row.userId"></UserNameById>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="operation" label="操作" width="220">
          <template #default="scope">
            <el-button-group>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此教师"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此教师"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small" @click="fakeDelete(scope.row.id)"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="停用此教师"
                  placement="top"
              >
                <el-button type="warning" size="small" :icon="Remove"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>


  <el-dialog v-model="addDialog" title="添加教师信息" width="400px" center>
    <AddTeacher></AddTeacher>
  </el-dialog>
</template>

<script setup>
import {Refresh, Search,Plus,Delete,Remove,Edit} from "@element-plus/icons-vue";
import SearchInput from "@/components/search/SearchInput";
import AddTeacher from "@/view/teacher/AddTeacher";
import StatusTag from "@/components/table/StatusTag";
import TeacherSex from "@/components/table/TeacherSex";
import UserNameById from "@/components/user/UserNameById";
</script>

<script>
// import Up from "@/view/teacher/Up";
// import Middle from "@/view/teacher/Middle";
// import Down from "@/view/teacher/Down";
import {selectAllTeacher, selectTeacher, fakeDeleteTeacher} from "@/api/teacher";
const {ElMessage} = require("element-plus");
export default {
  name: "teacherPage",
    // components: {Up,Middle,Down}
  data() {
    return {
      data:'',
      addDialog:false,
      searchForm:{
        teacherId:'',
        teacherName:'',
        status:'',
      }
    }
  },
  mounted() {
    this.getTeacher();
  },
  methods: {
    async getTeacher() {
      const t =await selectAllTeacher();
      this.data = t.data.data
    },
    async fakeDelete(id) {
      const t = await fakeDeleteTeacher(id);
      if (t.data.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }
    },
    selectTeacherId (text){
      this.searchForm.teacherId = text
    },
    selectTeacherName (text) {
      this.searchForm.teacherName = text
    },
    async searchTeacher() {
      const s = await selectTeacher(this.searchForm);
      this.data = s.data.data
    },
    clean() {
      this.searchForm = {
        teacherId:'',
        teacherName:'',
        status:'',
      }
    }
  },
  computed: {
    getData() {
      return this.data;
    }
  }
}


</script>

<style scoped>

.input-large{
  width: 100px;
}
.grid-content-middle {
  border-radius: 1px;
  min-height: 40px;
  text-align: center;
}
.bg-purple-dark {
  background: #ffffff;
}

</style>